<template>
    <div>        
        <van-nav-bar 
            title="修改头像" 
            left-text="返回" 
            right-text="确认修改" 
            left-arrow
            @click-left="$router.go(-1)" 
            @click-right="onClickRight" 
        />
        <van-uploader v-model="imgList" multiple :max-count="1" />
    </div>
</template>

<script>
    import { mapMutations, mapState } from 'vuex';
    import Uppy from '@uppy/core';
    import XHR from "@uppy/xhr-upload";
    import { Toast } from 'vant';

    export default {
        data() {
            return {
                imgList: [],
            }
        },
        computed: {
            ...mapState(["user"]),
            uppy() {
                return new Uppy({
                    autoProceed: false,                             // 是否自动上传
                    restrictions: {
                        maxNumberOfFiles: 6,                        // 设置最大上传文件数量
                        allowedFileTypes: ['.jpg', '.jpeg', '.png'] // 设置允许的文件类型
                    }
                })
                .use(XHR, { 
                    endpoint: 'http://localhost:4000/api/modifyHeadImg/upload',     // 上传地址
                    formData: true,                                                 // 启用FormData发送数据
                    fieldName: 'file',                                              // 文件字段名称
                    allowedMetaFields: ['user_id']                                  // 添加额外的元数据字段 
                });
            }        
        },
        methods: {
            ...mapMutations(['upHeadImg']),
            onClickRight() {
                // 设置额外的元数据字段，服务器保存要使用这些数据
                this.uppy.setMeta({ user_id: this.user._id });

                // 添加文件到上传队列
                this.uppy.addFile({
                    source: 'file input',
                    name: this.imgList.at(-1).file.name,
                    type: this.imgList.at(-1).file.type,
                    data: this.imgList.at(-1).file,
                });

                //  开始上传
                this.uppy.upload()
                .then(result => {
                    const { status, body } = result.successful[0].response;
                    
                    if (status == 200) {
                        Toast.success(body.info);
                        this.$router.go(-1);
                        this.upHeadImg(body.headImg);
                    }
                    
                    this.uppy.clear() // 清空上传队列
                })
                .catch(error => {
                    console.error('上传过程中发生错误:', error);
                    this.imgList.at(-1)[length].message = "failed";
                    this.imgList.at(-1)[length].status = "上传失败";
                }); 
            },
        }
    }
</script>